<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="5.css" rel="stylesheet" type="text/css" />
<title>任务五：零基础HTML及CSS编码（二）</title>
</head>
<body>
<header>
<img src="2.gif" alt="" class="img1"/>
<nav>
<ul>
	<li><a href="#" >导航链接1</a></li>
    <li><a href="#" >导航链接2</a></li>
    <li><a href="#" >导航链接3</a></li>
    <li><a href="#" >导航链接4</a></li>
</ul>
</nav>
</header>
<div class="main">
<div class="right">
<h2>侧边栏</h2>
<form>
<label class="label1" for="email">请输入邮箱地址</label>
<input type="text" id="email" name="emai" placeholder="这是一个文本输入框"/>
<p class="p3">邮箱地址请按要求格式输入</p>
<br /><br />
<label class="label1" for="password1">请输入密码</label>
<input type="text" id="password1" name="password11" placeholder="这是一个文本输入框"/>
<br>
<label class="label1" for="password2">请重复输入密码</label>
<input type="text" id="password2" name="password22" placeholder="这是一个文本输入框"/>
<p class="p3">密码请为6-16位英文数字</p>
<br /><br />
<label class="label1">性别</label>
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
<br>
<label class="label1">城市</label>
<select>
  <option value ="beijing">北京</option>
  <option value ="shanghai">上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen">深圳</option>
</select>
<br>
<label class="label1">爱好</label>
<input type="checkbox" name="game"/>运动
<input type="checkbox" name="art"/>艺术
<input type="checkbox" name="science"/>科学
<br>
<label class="label1" for="profile">个人描述</label>
<textarea id="profile">这是一个多行文本框，输入您的个人描述</textarea>
<br>
<input type="button" id="send" value="确认提交"/>
</form>
</div>
<div class="left">
<div class="div1">
<h2>网站前端</h2>
<h3>基础</h3>
<p class="p1">百度百科&nbsp;2013-03-23</p>
<p class="p2">前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。<a href="http://baike.baidu.com/">http://baike.baidu.com/</a>因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5HTML、CSS、JavaScript这三个是前端开发中最基本也是最必须的三个技能。</p>
<img src="1.jpeg" alt="" />
<p class="p2">前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。层和结构层。<a href="http://baike.baidu.com/" target="_blank">http://baike.baidu.com/</a>在进行开发前，需要对这些概念弄清楚弄明白，这样在开发的过程中才会得心应手。html、CSS3，以及SVG等。</p>
</div>
<div class="div1">
<h2>语言分类</h2>
<h3>Html</h3>
<p class="p1">百度百科&nbsp;2013-03-23</p>
<p class="p2">指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的HTML代码，XHTML的目标是取代HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。和结构层。<a href="http://baike.baidu.com/" target="_blank">百度百科</a>所有新的浏览器都支持 XHTML。</p>
<img src="1.jpeg" alt="" />
<br /><br />
<p class="p2">Html</p>
<p class="p2">CSS</p>
<p class="p2">Javascript<p>
</div>
<div class="div1">
<h2>图片</h2>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
<div class="image"><p>好看的图片</p><img src="1.jpeg" alt="" /></div>
</div>
<div class="div1 div2">
<h2>表格样式</h2>
<h3>表格</h3>
<p class="p1">百度百科&nbsp;2013-03-23</p>
<ol>
    <li>排名1</li>
    <li>排名2</li>
    <li>排名3</li>
</ol>
<br/>
<span>这是一个表格：</span>
<table border="1">
<thead>
<tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
</tr>
</thead>
<tbody>
    <tr><td>内容11</td><td>内容12</td><td><a href="#">操作1</a></td></tr>
    <tr><td>内容21</td><td>内容22</td><td><a href="#">操作2</a></td></tr>
    <tr><td>内容31</td><td>内容32</td><td><a href="#">操作3</a></td></tr>
    <tr><td>内容41</td><td>内容42</td><td><a href="#">操作4</a></td></tr>
    <tr id="trall"><td>合计</td><td colspan=2>10000</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<footer>
版权所有©
</footer>
</body>
</html>
